<template>
  <div style="margin: 0 24px">
    <van-nav-bar @click-left="clickLeft">
      <template #left>
        <img class="left-img" src="../assets/img/back.png" />
      </template>
      <template #title>
        <div class="pc-b2">目錄</div>
      </template>
      <template #right>
        <div class="ipad-b1">
          <van-icon name="search" />
        </div>
        <div class="pc-b1">
          <div class="d-flex pc-settings">
            <div>设置</div>
            <img class="settings-img" src="../assets/img/pc/settings.png" />
          </div>
        </div>
      </template>
    </van-nav-bar>
    <div class="catalogue-box">
      <div class="pc-catalogue pc-b1">
        <img src="../assets/img/pc/mulu.png" />
      </div>
      <div class="search-box ipad-b2">
        <van-field
          v-model="value1"
          left-icon=""
          right-icon="search"
          placeholder="请输入你需要搜索的书名"
          @click-right-icon="onSearch"
        />
      </div>
      <div class="first-tab d-flex d-col-center ipad-pc-b2">
        <div>
          <van-tabs
            v-model:active="active"
            shrink
            background="#F3F6F7"
            line-height="0"
            title-active-color="#4098F9"
          >
            <van-tab
              v-for="(item, index) in tabList"
              :title-style="{ 'font-size': '20px' }"
              :title="item.name"
              :key="index"
            ></van-tab>
          </van-tabs>
        </div>
        <div class="add-tab ipad-pc-b2" @click="addBooks">
          <van-icon name="plus" /> <span class="color-b f16">添加</span>
        </div>
      </div>
      <div class="pc-main">
        <div class="d-flex">
          <van-tabs
            v-model:active="active2"
            class="second-tab"
            scrollspy
            background="#F3F6F7"
            line-height="0"
            title-active-color="#4098F9"
            @click-tab="onClickTab"
          >
            <van-tab
              v-for="(item, index) in secondTabList"
              :key="index"
              :name="item.id"
            >
              <template #title>
                <div class="tab-item">
                  <div>{{ item.name }}</div>
                  <img
                    class="line-img"
                    v-if="tabSelect === index"
                    src="../assets/img/line.png"
                  />
                </div>
              </template>
            </van-tab>
          </van-tabs>
          <div class="add-tab ipad-pc-b1" @click="addBooks">
            <van-icon name="plus" /> <span class="color-b">添加</span>
          </div>
        </div>
        <div class="sort-tabs d-flex d-row-center">
          <van-tabs
            v-model:active="active3"
            type="card"
            background="#F3F6F7"
            line-height="0"
          >
            <van-tab v-for="index in 4" :title="'分类 ' + index" :key="index">
            </van-tab>
          </van-tabs>
        </div>
        <div class="book-list d-flex">
          <div
            class="book-list-b"
            v-for="(item, index) in bookList"
            :key="item.id"
          >
            <div
              class="book-box"
              :class="{ 'anima-shake': isDelete }"
              
            >
              <img
                class="off-btn"
                v-if="isDelete"
                @click="deleteBtnList(index)"
                src="../assets/img/off-btn.png"
                alt=""
              />
              <div 
                class="book-cont d-flex"
                @mousedown.prevent="startLongPress"
                @touchstart.prevent="startLongPress"
                @touchend.prevent="endLongPress">
                <img src="../assets/img/book/3.jpg" />
                <div class="book-instructions">
                  <div class="book-name">{{ item.title }}</div>
                  <div class="ipad-pc-b1">
                    <div class="book-tab color-b">{{ item.tab }}</div>
                    <div class="color-h">{{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="book-list-b" @click="booksShow = true">
            <div class="book-box">
              <!-- <img class="off-btn" src="../assets/img/off-btn.png" alt=""> -->
              <div class="book-assemble d-flex">
                <div class="book-a-cover">
                  <img src="../assets/img/book/1.jpg" />
                  <div class="book-shadow1"></div>
                  <div class="book-shadow1 book-shadow2"></div>
                </div>
                <div class="book-a-cover">
                  <img src="../assets/img/book/2.jpg" />
                </div>
                <div class="book-a-cover">
                  <img src="../assets/img/book/2.jpg" />
                </div>
                <div class="book-a-cover">
                  <img src="../assets/img/book/2.jpg" />
                </div>
                <div class="book-a-cover">
                  <img src="../assets/img/book/7.jpg" />
                  <div class="book-shadow1"></div>
                  <div class="book-shadow1 book-shadow2"></div>
                </div>
                <div class="book-a-cover">
                  <img src="../assets/img/book/8.jpg" />
                </div>
              </div>
              <div class="book-name ipad-pc-b2">书单1</div>
            </div>
          </div>
          <div class="book-list-b">
            <div class="book-box">
              <!-- <img class="off-btn" src="../assets/img/off-btn.png" alt=""> -->
              <div class="book-cont d-flex" @click="openUrl('/exampaper')">
                <div class="book-cover">
                  <img src="../assets/img/book/4.jpg" />
                  <div class="book-shadow1"></div>
                  <div class="book-shadow1 book-shadow2"></div>
                </div>
                <div class="book-instructions">
                  <div class="book-name">真题作文</div>
                  <div class="ipad-pc-b1">
                    <div class="book-tab color-b">國小</div>
                    <div class="color-h">
                      这里是题册介绍这里是题册介绍这里是这里是
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="book-list-b">
            <div class="book-box">
              <!-- <img class="off-btn" src="../assets/img/off-btn.png" alt=""> -->
              <div class="book-cont d-flex" @click="openUrl('/exampaper')">
                <div class="book-cover">
                  <img src="../assets/img/book/4.jpg" />
                  <div class="book-shadow1"></div>
                  <div class="book-shadow1 book-shadow2"></div>
                </div>
                <div class="book-instructions">
                  <div class="book-name">知识点</div>
                  <div class="ipad-pc-b1">
                    <div class="book-tab color-b">國小</div>
                    <div class="color-h">
                      这里是知识点这里是知识点这里是知识点
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ipad-pc-b2">
      <transition name="zoom">
        <div
          class="books-list-back"
          v-if="booksShow"
          @click.stop="booksOff"
        >
          <div class="books-list-show"  @click.stop="">
            <div class="books-show-tit">书单1</div>
            <div class="books-show-box d-flex d-row-center">
              <div
                class="img-box"
                :class="{ 'anima-shake': isDelete }"
                v-for="(item, index) in smBookList"
                :key="index"
              >
                <img
                  class="off-btn"
                  v-if="isDelete"
                  @click.stop="deleteBtnList2(index)"
                  src="../assets/img/off-btn.png"
                  alt=""
                />
                <div
                  @mousedown.prevent="startLongPress"
                  @touchstart.prevent="startLongPress"
                  @touchend.prevent="endLongPress">
                  <img src="../assets/img/book/1.jpg" />
                <div>{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const isDelete = ref(false);
const booksShow = ref(false);
const value1 = ref("");
const active = ref();
const active2 = ref();
const active3 = ref();
const tabSelect = ref(0);
const clickShow = ref(false)
const smBookList = ref([
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
    num: 1,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
    num: 2,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
    num: 2,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
    num: 2,
  },
]);
const bookList = ref([
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 1,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 2,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 0,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 1,
  },
  {
    title: "奧朵母知識",
    tab: "國小",
    content:
      "这里是题册介绍这里是题册介绍这里是这里是题册介绍这里是题册介绍这里是",
    status: 2,
  },
]);
const tabList = ref([
  {
    id: 0,
    name: "书架",
  },
  {
    id: 1,
    name: "书单",
  },
]);
const secondTabList = ref([
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "國小",
  },
  {
    id: 2,
    name: "國中",
  },
  {
    id: 3,
    name: "高中",
  },
]);
const longPressTimer = ref(0);
const booksOff = (event) => {
  event.stopPropagation();
  booksShow.value = false
}
const startLongPress = () => {
  longPressTimer.value = setTimeout(() => {
    longPressTimer.value = 0
    console.log("Long Pressed!");
    clickShow.value = false
    // 在这里执行长按时的操作
    isDelete.value = true;
  }, 1000); // 设置长按时间为1秒（1000毫秒）
};
const handlerTouchmove = () => {
  clearTimeout(longPressTimer.value);
  console.log(longPressTimer.value)
  if (longPressTimer.value !== 0) {
        // 单击操作
        console.log('党纪')
        openUrl('/chapter')
      // clickShow.value  = true
      // this.longClickShow = false
  }
};
const endLongPress = () => {
  console.log(longPressTimer.value)
  clearTimeout(longPressTimer.value);
  if (longPressTimer.value !== 0) {
        // 单击操作
        console.log('党纪')
        openUrl('/chapter')
      // clickShow.value  = true
      // this.longClickShow = false
  }
};
const deleteBtnList = (i) => {
  bookList.value.splice(i, 1);
  isDelete.value = false;
};
const deleteBtnList2 = (i) => {
  smBookList.value.splice(i, 1);
  isDelete.value = false;
};
const booksShowBtns = (event) => {
  event.stopPropagation();
};
const addBooks = () => {
  console.log("添加");
  router.push("/addBooks");
};
const onClickTab = (data) => {
  console.log(data.name);
  tabSelect.value = data.name;
};
const onSearch = () => {
  console.log("搜索");
};
const clickLeft = () => {
  // router.back();
  router.push("/");
};
const openUrl = (url) => {
  // router.back();
  router.push(url);
};
</script>

<style lang="scss" scoped>
.books-list-back {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
.books-list-show {
  width: 200px;
  padding: 7px 10px;
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(235, 235, 235, 0.75);
  /* background: red; */
  border-radius: 8px;
  transition: transform 0.5s ease; /* 添加过渡效果 */
  .books-show-tit {
    width: 130px;
    margin: 0 auto 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #e0e0e0;
    border-radius: 8px 8px 8px 8px;
    color: #7c7c7c;
  }
  .books-show-box {
    flex-wrap: wrap;
    margin-right: -10px;
    .img-box {
      width: 65px;
      height: 116px;
      margin-right: 10px;
      margin-bottom: 36px;
      position: relative;
      .off-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
      }
      &:nth-child(even) {
        margin-right: 0px;
      }
      div {
        margin-top: 8px;
      }
      img {
        width: 100%;
        height: 90px;
      }
    }
  }
}
.catalogue-box {
  .pc-catalogue {
    width: 118px;
    height: 52px;
    margin: 20px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .search-box {
    width: 327px;
    margin: 0 auto;
    padding-top: 4px;
  }
  .first-tab {
    padding: 8px 0;
    border-bottom: 1px solid #e7ecf3;
  }
  .add-tab {
    margin-left: auto;
    width: 60px;
  }
  .second-tab {
    width: 100%;
    overflow: hidden;
    .tab-item {
      position: relative;
      .line-img {
        position: absolute;
        bottom: -8px;
        right: 0;
        width: 29px;
        height: 7px;
      }
    }
  }
  .sort-tabs {
    margin-top: 15px;
  }
  .book-list {
    flex-wrap: wrap;
    margin-right: -10px;
    position: relative;
    .book-list-b {
      width: 33.33333%;
      /*平板竖屏*/
      @media screen and (min-width: 800px) {
        width: auto;
      }
    }

    .book-box {
      width: 100px;
      margin-right: 10px;
      margin-top: 24px;
      position: relative;
      flex-direction: column;
      transition: 0.3s ease;
      .book-shadow1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -4px;
        right: -4px;
        z-index: -1;
        background: #e9e9e9;
        &.book-shadow2 {
          top: -6px;
          right: -6px;
          z-index: -2;
          background: #d9d9d9;
        }
      }
      .book-assemble {
        padding: 8px;
        height: 146px;
        width: 100px;
        margin-right: -4px;
        background: #eeeeee;
        border-radius: 4px;
        flex-wrap: wrap;
        align-items: flex-start;
        overflow: hidden;
        .book-a-cover {
          width: calc(50% - 4px);
          height: 62px;
          margin-right: 4px;
          margin-bottom: 8px;
          position: relative;
          z-index: 9;
          &:last-child {
            margin-right: 0px;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .off-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
      }
      .book-cont {
        display: block;
        .book-cover {
          width: 100px;
          height: 146px;
          position: relative;
          z-index: 9;
        }
      }
      img {
        width: 100px;
        height: 146px;
      }

      .book-name {
        margin-top: 8px;
      }
      .book-tab {
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: rgba(64, 152, 249, 0.1);
        border-radius: 4px;
        margin: 8px 0;
      }
      /*平板竖屏*/
      @media screen and (min-width: 800px) {
        width: 371px;
        padding: 32px;
        height: 215px;
        background: #ffffff;
        box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
        border-radius: 8px 8px 8px 8px;
        align-items: flex-start;
        .book-assemble {
          width: 100%;
          padding: 0;
          background: #ffffff;
          flex-wrap: wrap;
          align-items: flex-start;
          overflow: visible;
          .book-a-cover {
            width: calc(25% - 12px);
            margin-top: -20px;
            height: 90px;
            margin-right: 12px;
            margin-bottom: 34px;
            position: relative;
            z-index: 9;
            &:last-child {
              margin-right: 0px;
            }
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .book-instructions {
          margin-left: 16px;
        }
        .book-cont {
          display: flex;
          align-items: flex-start;
        }
        &:last-child {
          /* //margin-top: 20px; */
          margin-left: 0px;
        }
      }
    }
  }
}
</style>

